<template>
  <div class="home" >
    <!-- 导航栏 -->
	<el-scrollbar height="90vh">
		<el-menu :default-active="state.activeIndex" 
			:collapse='isCollapse' :default-openeds="state.defaultOpen" background-color="#1c2036"  text-color="#dedede"  active-text-color="#9c3939" :router="true"
			@select="handleSelect" :unique-opened="true"
		>
			<el-menu-item index="/home">
				<template #title>
					<el-icon><Lightning /></el-icon>
					<span>Home</span>
				</template>
			</el-menu-item>
			<el-sub-menu index="1">
				<template #title>
					<el-icon><Sunrise /></el-icon>
					<span>树</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/AboutView">ztree</el-menu-item>
					<el-menu-item index="/oneTwo">element两棵树</el-menu-item>
					<el-menu-item index="/oneThree">element一棵树</el-menu-item>
					<el-menu-item index="/oneFour">1-4</el-menu-item>
					<el-menu-item index="/oneFive">1-5</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
			<el-sub-menu index="2">
				<template #title>
					<el-icon><Ship /></el-icon>
					<span>表格radio</span>
				</template>
				<el-menu-item-group>
				<el-menu-item index="/twoOne">下拉框</el-menu-item>
				<el-menu-item index="/twoTwo">取值</el-menu-item>
				<el-menu-item index="/twoTree">取值11</el-menu-item>
				<el-menu-item index="/twoFour">表格input</el-menu-item>
				<el-menu-item index="/twoFive">表格checkbox</el-menu-item>
				<el-menu-item index="/twoSix">表格radio</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
			<el-sub-menu index="3">
				<template #title>
					<el-icon><MostlyCloudy /></el-icon>
					<span>表格CheckBox</span>
				</template>
				<el-menu-item-group>
				<el-menu-item index="/threeOne">3-1</el-menu-item>
				<el-menu-item index="/threeTwo">表格checkbox</el-menu-item>
				<el-menu-item index="/threeThree">表格checkbox新</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
			<el-sub-menu index="4">
				<template #title>
					<el-icon><PartlyCloudy /></el-icon>
					<span>兄弟组件1</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/fourOne">引入两个组件</el-menu-item>
					<el-menu-item index="/fourTwo">引入两个组件组成的页面</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
			<el-sub-menu index="5">
				<template #title>
					<el-icon><Sunset /></el-icon>
					<span>兄弟组件2</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/fiveOne">5-1</el-menu-item>
					<el-menu-item index="/fiveTwo">5-2</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
			<el-sub-menu index="6">
				<template #title>
					<el-icon><Drizzling /></el-icon>
					<span>动态页面</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/sixOne">去动态页面</el-menu-item>
					<el-menu-item index="/sixTwo">原有导航存在页面</el-menu-item>
					<el-menu-item index="/sixThree">去底层模板生成</el-menu-item>
					<el-menu-item index="/sixFour">json数据</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
			<el-sub-menu index="7">
				<template #title>
					<el-icon><Pouring /></el-icon>
					<span>升级element</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/sevenOne">测试升级</el-menu-item>
					<el-menu-item index="/sevenTwo">拖拽表格</el-menu-item>
					<el-menu-item index="/sevenThree">比较数组</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
			<el-sub-menu index="8">
				<template #title>
					<el-icon><MoonNight /></el-icon>
					<span>8</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/sevenOne">8.1</el-menu-item>
					<el-menu-item index="/sevenTwo">8.2</el-menu-item>
					<el-menu-item index="/sevenThree">8.3</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>

			
			
		</el-menu>
	</el-scrollbar>

  </div>
</template>

<script lang="ts">
import { reactive, Ref, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import {useStore} from 'vuex';

export default {
	name:'navBar',
    components:{

    },
    props:['isCollapse'],

    setup(props:any) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            defaultOpen: [],
            showMenu: true,
            currentPath: '/about',
            activeIndex: '/home',
            count: {
                number: 1
            }
        })
		const isCollapse = ref(false)
		const handleSelect = (key: string, keyPath: string[],item:string) => {
			let comp = key.split('/')[1]
			store.state.navList.push({
				title:comp,
				name:comp,
				stutas:0,
				path:key
			})
			store.state.includeList.push(comp)
			//去重
			const tabArr = ref([{}])
			for(let i = 0;i<store.state.navList.length;i++){
				if(tabArr.value.indexOf(store.state.navList[i].name)== -1){
					tabArr.value.push(store.state.navList[i].name)
				}else{
					store.state.navList.splice(i,1)
				}
			}
			store.state.activeIndex = key
			state.activeIndex = key
		}
		watch(()=>props.isCollapse,()=>{
			console.log('监听')
			isCollapse.value = props.isCollapse
		})

        return {
            state,
			handleSelect,
			isCollapse
        }
    }
}
</script>

<style scoped>


.el-menu-vertical-demo:not(.el-menu--collapse) {
  	width: 200px;
  	min-height: 400px;
}
.home{
	height: 90vh;
	background: #1c2036;
}



</style>

